<section class="p-6" [ngClass]="['text' + defaultInv]">
	<form
		class="container w-full max-w-xl p-8 mx-auto space-y-6 rounded-md shadow"
		[ngClass]="['bg' + contrast]"
	>
		<h2 class="w-full text-3xl font-bold leading-tight">Contact us</h2>

		<div>
			<label for="name" class="block mb-1 ml-1">Name</label>
			<input
				class="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25"
				[ngClass]="['focus:ring' + primary, 'bg' + default]"
				id="name"
				type="text"
				placeholder="Your name"
				required
			/>
		</div>

		<div>
			<label for="email" class="block mb-1 ml-1">Email</label>
			<input
				class="block w-full p-2 rounded focus:outline-none focus:ring focus:ring-opacity-25"
				[ngClass]="['focus:ring' + primary, 'bg' + default]"
				id="email"
				type="email"
				placeholder="Your email"
				required
			/>
		</div>

		<div>
			<label for="message" class="block mb-1 ml-1">Message</label>
			<textarea
				class="block w-full p-2 rounded autoexpand focus:outline-none focus:ring focus:ring-opacity-25"
				[ngClass]="['focus:ring' + primary, 'bg' + default]"
				id="message"
				type="text"
				placeholder="Message..."
			></textarea>
		</div>

		<div class="">
			<button
				class="w-full px-4 py-2 font-bold rounded shadow focus:outline-none focus:ring hover:ring focus:ring-opacity-50"
				[ngClass]="[
					'bg' + primary,
					'focus:ring' + primary,
					'hover:ring' + primary,
					'text' + contrast
				]"
				type="submit"
			>
				Send
			</button>
		</div>
	</form>
</section>
